<template>
  <tiny-container :pattern="store.pattern">
    <template #header>
      <tiny-layout>
        <headers />
      </tiny-layout>
    </template>
    <template #aside>
      <tiny-layout class="tree_menu">
        <menus />
      </tiny-layout>
    </template>
    <tiny-layout>
      <tabs />
      <div class="main-class"><router-view> </router-view></div>
    </tiny-layout>
    <template #footer>
      <tiny-layout>
        <footers />
      </tiny-layout>
    </template>
  </tiny-container>
</template>

<script setup>
  import {reactive, getCurrentInstance} from 'vue';
  import {Container as TinyContainer} from '@opentiny/vue';
  import headers from '@/components/home/Header.vue';
  import menus from '@/components/home/Menu.vue';
  import footers from '@/components/home/Footer.vue';
  import tabs from '@/components/home/Tabs.vue';
  const data = reactive({pattern: 'default'});
  import {cosSystem} from '@/stores/system.js';
  let store = cosSystem();

  data.patternData = [
    {
      title: '默认:default',
      value: 'default',
    },
    {
      title: '经典:classic',
      value: 'classic',
    },
    {
      title: '简约:simple',
      value: 'simple',
    },
    {
      title: '时尚:fashion',
      value: 'fashion',
    },
    {
      title: '传奇:legend',
      value: 'legend',
    },
  ];
  window.onresize = () => {
    var width = document.body.clientWidth;
    if (width <= 1024) {
        store.pattern = 'classic';
        store.nav = 'menus';
        store.mod='mobile'
    } else {
        store.pattern = 'default';
        store.nav = 'crumb';
        store.mod='pc'
    }
  };
</script>
<style lang="scss" scoped>
  .demo-container .tiny-container {
    height: 200px;
    color: #5f6774;
    text-align: center;
    font-size: 18px;
    position: relative;
  }

  .tiny-container {
    .tiny-container__aside {
      color: #bd1616;
    }
  }

  .main-class {
    padding: 10px;
  }

  .tabs {
    padding-top: 0px;
  }
</style>
